<script minify>
import { apiValueFmt, delaySet } from "@servicestack/client"
import { AdminQueryUsers } from "../../lib/types"

/**: cheap nav update without creating multiple App.events subs per child component */
let adminUsersNav = null

App.component('AdminUsers', ({ store, routes, client }) => {
    return {
        $template: '#admin-users-template',
        store, routes, client,
        link: store.adminLink('users'),
        loading: false,

        pageSize: 25,
        get page() { return routes.page ? parseInt(routes.page) : 0 },
        request: new AdminQueryUsers({ query:routes.q }),
        onKeyDown (e) {
            if (e.key === 'Escape' && (routes.new || routes.edit)) {
                routes.to({ new:null, edit:null })
            }
        },
        formSearch() {
            routes.to({ new:null, edit:null, page:0, q:this.request.query })
            this.search()
        },
        search() {
            this.request.orderBy = routes.sort ? routes.sort : null
            this.request.skip = routes.page > 0 ? this.pageSize * Number(routes.page || 1) : 0
            this.request.take = this.pageSize
            
            let complete = delaySet(x => this.loading = x)
            client.api(this.request, { jsconfig: 'eccn' })
                .then(api => {
                    this.api = api
                    complete()
                })
        },
        sortBy(field) {
            return routes.sort === field
                ? '-' + field
                : routes.sort === '-' + field
                    ? ''
                    : field
        },
        api: null,
        get results() { return this.api && this.api.response && this.api.response.results || [] },
        get fieldNames() { return store.adminUsers.queryUserAuthProperties || [] },
        apiValueFmt,
        mounted() {
            this.search()
        },
        nav() {
            if (adminUsersNav) adminUsersNav()
        },
    }
})
</script>
<!--minify-->
<template id="admin-users-template">
<section id="admin-users" @keydown="onKeyDown" @vue:mounted="mounted">
    <form @submit.prevent="formSearch()" class="mb-3">
        <div class="flex items-center">
            <div class="w-60 mb-1" v-scope="Input({ input:{id:'query', type:'search', placeholder:'Search Users', label:'', onsearch:formSearch}, model:request })"></div>
            <button class="ml-2 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Go
            </button>
            <div class="ml-3">
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a v-href="{ page: Math.max(page - 1,0), $on:search }" title="Previous Page"
                       :class="`${page > 0 ? 'text-gray-500 hover:bg-gray-50' : 'text-gray-300 cursor-text'} relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium`">
                        <span class="sr-only">Previous</span>
                        <!---: Heroicon name: solid/chevron-left -->
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    <a v-href="{ page: results.length < pageSize ? page : page + 1, $on:search }" title="Next Page" 
                       :class="`${results.length >= pageSize ? 'text-gray-500 hover:bg-gray-50' : 'text-gray-300 cursor-text'} relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium`">
                        <span class="sr-only">Next</span>
                        <!---: Heroicon name: solid/chevron-right -->
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </nav>                
            </div>
            <div class="ml-3 align-middle">
                <p class="text-sm text-gray-700">
                    <span class="hidden lg:inline">Showing results</span>
                    <span class="whitespace-nowrap">
                        <span class="font-medium">{{ (page * pageSize) + 1 }}</span>
                        to
                        <span class="font-medium">{{ (page * pageSize) + results.length }}</span>
                    </span>
                </p>
            </div>
            <a v-href="{ new:1,edit:null }" class="ml-3 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                New 
                <span class="hidden md:ml-1 md:inline">User</span>
            </a>
        </div>
    </form>

    <div v-if="routes.new"       class="mb-3 max-w-screen-md" v-scope="AdminUsersNew({ store, routes, client, done:formSearch })"></div>
    <div v-else-if="routes.edit" class="mb-3 max-w-screen-md" v-scope="AdminUsersEdit({ store, routes, client, id:() => routes.edit, done:formSearch })"></div>
    
    <div v-if="loading" v-scope="Loading()"></div>
    <div v-else-if="results.length" class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
            <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg my-3">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-3 text-gray-500 text-left">
                            <button type="button" title="Create User" @click="routes.to({ new:1, edit:null, $on:nav })"
                                    class="flex-shrink-0 rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5v2H5v14h14v-5h2z" fill="currentColor"/><path d="M21 7h-4V3h-2v4h-4v2h4v4h2V9h4z" fill="currentColor"/>
                                </svg>
                            </button>
                        </th>
                        <th v-for="name in fieldNames" scope="col" 
                            class="cursor-pointer px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            <a v-href="{ sort:sortBy(name), $on:search }" class="flex items-center">
                                <div>{{humanify(name)}}</div>
                                <svg v-if="name == request.orderBy || '-' + name == request.orderBy" 
                                     :class="[name == request.orderBy ? '' : 'rotate-180','mr-2 text-gray-400 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150']" viewBox="0 0 32 32" aria-hidden="true">
                                    <path d="M24 12l-8 10l-8-10z" fill="currentColor"/>
                                </svg>
                            </a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(row,index) in results" :v-key="`r-${row.Id}`" :class="index %2 == 0 ? 'bg-white' : 'bg-gray-50'">
                        <td class="px-3 py-3 text-gray-500">
                            <button type="button" title="Edit User" @click="routes.to({ new:null, edit:row.Id, $on:nav })"
                                    class="flex-shrink-0 rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <g fill="none"><path d="M16.474 5.408l2.118 2.117m-.756-3.982L12.109 9.27a2.118 2.118 0 0 0-.58 1.082L11 13l2.648-.53c.41-.082.786-.283 1.082-.579l5.727-5.727a1.853 1.853 0 1 0-2.621-2.621z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 15v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>
                                </svg>
                            </button>
                        </td>
                        <td v-for="name in fieldNames" :v-key="`f-${row.Id}-${name}`" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {{apiValueFmt(row[name])}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
</template>
<!--/minify-->

<script minify>
import { AdminCreateUser, AdminDeleteUser, AdminGetUser, AdminUpdateUser } from "../../lib/types"
import { mapGet, resolve } from "@servicestack/client"

(function (){
    let formLayout = store.adminUsers.userFormLayout
    let mapInput = f => formLayout.reduce((acc,row) => acc.concat(row.map(input => f(input))), [])
    let inputIds = mapInput(input => input.id)
    let exceptFields = [...mapInput(x => x.id), 'password', 'id']

    let defaults = {
        roles: [],
        permissions: [],
        addRoles: [],
        removeRoles: [],
        addPermissions: [],
        removePermissions: [],
    }
    function init(request,dtoProps) {
        inputIds.forEach(id => {
            if (dtoProps.indexOf(id) >= 0)
                request[id] = defaults[id] || null
            else
                request.userAuthProperties[id] = defaults[id] || null
        })
        dtoProps.forEach(id => request[id] = defaults[id] || null)
        return request
    }

    App.components({
        AdminUsersNew({ store, routes, client, done }) {
            let dtoProps = 'userName,firstName,lastName,displayName,email,profileUrl,roles,permissions,password'.split(',')

            return {
                $template: '#admin-users-new-template',
                store, routes, client,
                request: init(new AdminCreateUser({ userAuthProperties:{} }), dtoProps),
                isDtoProp(id) { return dtoProps.indexOf(id) >= 0 },
                loading: false,
                api: null,
                get errorSummary() { return this.api && this.api.error && this.api.summaryMessage(exceptFields) },
                formLayout,
                get gridClass() { return gridClass() },
                get gridInputs() { return gridInputs(this.formLayout) },
                model:{ newRole:'', newPermission:'' },
                addRole() {
                    this.request.roles.push(this.model.newRole)
                    this.model.newRole = ''
                },
                addPermission() {
                    this.request.permissions.push(this.model.newPermission)
                    this.model.newPermission = ''
                },
                get missingRoles() {
                    return ['', ...store.adminUsers.allRoles.filter(x => this.request.roles.indexOf(x) < 0)]
                },
                get missingPermissions() {
                    return ['', ...store.adminUsers.allPermissions.filter(x => this.request.permissions.indexOf(x) < 0)]
                },
                submit() {
                    let complete = delaySet(x => this.loading = x)
                    client.api(this.request, { jsconfig: 'eccn' })
                        .then(api => {
                            complete()
                            this.api = api
                            if (!api.failed) done()
                        })
                },
            }
        },

        AdminUsersEdit({ store, routes, client, id, done }) {
            let dtoProps = 'userName,firstName,lastName,displayName,email,profileUrl'.split(',')

            return {
                $template: '#admin-users-edit-template',
                store, routes, client,
                get id() { return resolve(id) },
                request: init(new AdminUpdateUser({ id:resolve(id), userAuthProperties:{} }), dtoProps),
                isDtoProp(id) { return dtoProps.indexOf(id) >= 0 },
                set(id,val) {
                    if (this.isDtoProp(id))
                        this.request[id] = val
                    else
                        this.request.userAuthProperties[id] = val
                },
                success: '',
                loading: false,
                api: null,
                lockedDate: null,
                roles: [],
                permissions: [],
                origRoles: [],
                origPermissions: [],
                model:{ newRole:'', newPermission:'', password:'', confirmDelete: false, },
                get errorSummary() { return this.api && this.api.error && this.api.summaryMessage(exceptFields) },
                formLayout,
                get gridClass() { return gridClass() },
                get gridInputs() { return gridInputs(this.formLayout) },
                addRole() {
                    this.roles.push(this.model.newRole)
                    this.model.newRole = ''
                },
                addPermission() {
                    this.permissions.push(this.model.newPermission)
                    this.model.newPermission = ''
                },
                get missingRoles() {
                    return ['', ...store.adminUsers.allRoles.filter(x => this.roles.indexOf(x) < 0)]
                },
                get missingPermissions() {
                    return ['', ...store.adminUsers.allPermissions.filter(x => this.permissions.indexOf(x) < 0)]
                },
                send(request, success, error) {
                    this.loading = true
                    this.success = ''
                    client.api(request, { jsconfig: 'eccn' })
                        .then(api => {
                            this.loading = false
                            this.api = api
                            if (api.failed) {
                                if (error) error(api.error)
                            }
                            else if (api.succeeded) {
                                if (success) success(api.response)
                            }
                        })
                },
                changePassword() {
                    this.send(new AdminUpdateUser({ id:this.id }), respose => {
                        this.model.password = ''
                        this.success = 'Password was changed'
                        this.bind(respose)
                    })
                },
                deleteUser() {
                    if (!this.model.confirmDelete) return
                    this.send(new AdminDeleteUser({ id:this.id }), done)
                },
                lockUser() {
                    this.send(new AdminUpdateUser({ id:this.id, lockUser:true }), response => this.bind(response))
                },
                unlockUser() {
                    this.send(new AdminUpdateUser({ id:this.id, unlockUser:true }), response => this.bind(response))
                },
                submit() {
                    this.request.addRoles = this.roles.filter(x => this.origRoles.indexOf(x) < 0)
                    this.request.removeRoles = this.origRoles.filter(x => this.roles.indexOf(x) < 0)
                    this.request.addPermissions = this.permissions.filter(x => this.origPermissions.indexOf(x) < 0)
                    this.request.removePermissions = this.origPermissions.filter(x => this.permissions.indexOf(x) < 0)
                    this.send(this.request, done)
                },
                bind(response) {
                    inputIds.forEach(id => this.set(id, mapGetForInput(response.result, id)))
                    let r = response.result
                    this.request.id = this.id
                    this.lockedDate = mapGet(r, 'lockedDate') || null
                    this.roles = mapGet(r, 'roles') || []
                    this.origRoles = [...this.roles]
                    this.permissions = mapGet(r, 'permissions') || []
                    this.origPermissions = [...this.permissions]
                },
                mounted() {
                    this.send(new AdminGetUser({ id:this.id }), response => this.bind(response))
                    adminUsersNav = () => this.mounted()
                },
            }
        },
    })    
})()
</script>

<!--minify-->
<template id="admin-users-new-template">
<div class="shadow overflow-hidden sm:rounded-md bg-white">
    <form @submit.prevent="submit" autocomplete="off">
    <div class="relative px-4 py-5 bg-white sm:p-6">
        <div v-scope="CloseButton({ onclick:() => routes.to({ new:null }) })" title="Close"></div>
            <div class="text-xl text-gray-900 text-center mb-4">New User</div>
            <div v-if="errorSummary" v-scope="ErrorSummary({ errorSummary: () => errorSummary })"></div>
            <div class="flex flex-wrap sm:flex-nowrap">
                <fieldset class="flex-grow mb-3 sm:mb-0">
                    <div :class="gridClass">
                        <div v-for="{ input, rowClass } in gridInputs" :class="rowClass">
                            <div :key="input.id" v-scope="Input({ input, model:isDtoProp(input.id) ? request : request.userAuthProperties, api:() => api })"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="flex-grow sm:flex-shrink sm:ml-6">
                    <div :class="gridClass">
                        <div class="col-span-6">
                            <div v-scope="Input({ input:{ id:'password', type:'password' }, model:request, api:() => api })"></div>
                        </div>
                        <div v-if="request.roles.length > 0" class="col-span-6">
                            <label class="mb-2 block text-sm font-medium text-gray-700">Add Roles</label>
                            <div v-for="role in request.roles" class="mb-2 flex items-center">
                                <svg @click="request.roles = request.roles.filter(x => x !== role)" class="mr-1 w-5 h-5 text-gray-500 hover:text-gray-700 cursor-pointer" 
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <title>Remove Role</title>
                                    <g fill="none"><path d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>
                                </svg>
                                <span>{{role}}</span>
                            </div>
                        </div>
                        <div v-if="missingRoles.length > 1" class="col-span-6 flex items-end">
                            <div class="flex-grow" v-scope="Input({ input:{ id:'newRole', type:'select', label: 'New Role', allowableValues:() => missingRoles }, model, api })"></div>
                            <div>
                                <button type="button" @click="addRole" :disabled="!model.newRole" 
                                        :class="`${model.newRole ? 'text-gray-700 hover:bg-gray-50' : 'text-gray-400'} ml-2 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                                    Add
                                </button>                                
                            </div>
                        </div>
                        <div v-if="request.permissions.length > 0" class="col-span-6">
                            <label class="mb-2 block text-sm font-medium text-gray-700">Add Permissions</label>
                            <div v-for="permission in request.permissions" class="mb-2 flex items-center">
                                <svg @click="request.permissions = request.permissions.filter(x => x !== permission)" class="mr-1 w-5 h-5 text-gray-500 hover:text-gray-700 cursor-pointer"
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <title>Remove Permission</title>
                                    <g fill="none"><path d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>
                                </svg>
                                <span>{{permission}}</span>
                            </div>
                        </div>
                        <div v-if="missingPermissions.length > 1" class="col-span-6 flex items-end">
                            <div class="flex-grow" v-scope="Input({ input:{ id:'newPermission', type:'select', label: 'New Permission', allowableValues:() => missingPermissions }, model, api })"></div>
                            <div>
                                <button type="button" @click="addPermission" :disabled="!model.newPermission"
                                        :class="`${model.newPermission ? 'text-gray-700 hover:bg-gray-50' : 'text-gray-400'} ml-2 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                                    Add
                                </button>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
    </div>
    <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 flex justify-between">
        <div>
            <div v-if="loading" v-scope="Loading({ cls:'p-0' })"></div>            
        </div>
        <div>
            <button type="submit" :disabled="loading"
                    :class="`${!loading ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-indigo-400'} inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                Create User
            </button>
        </div>
    </div>
    </form>
</div>
</template>

<template id="admin-users-edit-template">
    <div class="shadow overflow-hidden sm:rounded-md bg-white" @vue:mounted="mounted">
        <form @submit.prevent="submit" autocomplete="off">
            <div class="relative px-4 py-5 bg-white sm:p-6">
                <div v-scope="CloseButton({ onclick:() => routes.to({ edit:null }) })" title="Close"></div>
                <div class="text-xl text-gray-900 text-center mb-4">Edit User</div>
                <div v-if="errorSummary" v-scope="ErrorSummary({ errorSummary: () => errorSummary })"></div>
                <div v-else-if="success" v-scope="AlertSuccess({ message:() => success })" class="mb-3"></div>

                <div class="flex flex-wrap sm:flex-nowrap">
                    <fieldset class="flex-grow mb-3 sm:mb-0">
                        <div :class="gridClass">
                            <div v-for="{ input, rowClass } in gridInputs" :class="rowClass">
                                <div :key="input.id" v-scope="Input({ input, model:isDtoProp(input.id) ? request : request.userAuthProperties, api:() => api })"></div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="flex-grow sm:flex-shrink sm:ml-6">
                        <div :class="gridClass">
                            <div class="col-span-6 flex items-end">
                                <div class="flex-grow" v-scope="Input({ input:{ id:'password', type:'password' }, model, api:() => api })"></div>
                                <div>
                                    <button type="button" @click="changePassword" :disabled="!model.password"
                                            :class="`${model.password ? 'bg-red-600 hover:bg-red-700' : 'bg-red-400'} ml-2 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`">
                                        Change
                                    </button>
                                </div>
                            </div>
                            <div class="col-span-6 flex items-end">
                                <div v-if="!lockedDate">
                                    <button type="button" @click="lockUser"
                                            class="bg-red-600 hover:bg-red-700 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                        Lock User
                                    </button>
                                </div>
                                <div v-else>
                                    <div class="flex items-center">
                                        <div>Locked on {{apiValueFmt(lockedDate)}}</div>
                                        <div class="ml-2">
                                            <button type="button" @click="unlockUser"
                                                    class="bg-red-600 hover:bg-red-700 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                                Unlock User
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="roles.length > 0" class="col-span-6">
                                <label class="mb-2 block text-sm font-medium text-gray-700">Add Roles</label>
                                <div v-for="role in roles" class="mb-2 flex items-center">
                                    <svg @click="roles = roles.filter(x => x !== role)" class="mr-1 w-5 h-5 text-gray-500 hover:text-gray-700 cursor-pointer"
                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <title>Remove Role</title>
                                        <g fill="none"><path d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>
                                    </svg>
                                    <span>{{role}}</span>
                                </div>
                            </div>
                            <div v-if="missingRoles.length > 1" class="col-span-6 flex items-end">
                                <div class="flex-grow" v-scope="Input({ input:{ id:'newRole', type:'select', label: 'New Role', allowableValues:() => missingRoles }, model, api })"></div>
                                <div>
                                    <button type="button" @click="addRole" :disabled="!model.newRole"
                                            :class="`${model.newRole ? 'text-gray-700 hover:bg-gray-50' : 'text-gray-400'} ml-2 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                                        Add
                                    </button>
                                </div>
                            </div>
                            <div v-if="permissions.length > 0" class="col-span-6">
                                <label class="mb-2 block text-sm font-medium text-gray-700">Add Permissions</label>
                                <div v-for="permission in permissions" class="mb-2 flex items-center">
                                    <svg @click="permissions = permissions.filter(x => x !== permission)" class="mr-1 w-5 h-5 text-gray-500 hover:text-gray-700 cursor-pointer"
                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <title>Remove Permission</title>
                                        <g fill="none"><path d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>
                                    </svg>
                                    <span>{{permission}}</span>
                                </div>
                            </div>
                            <div v-if="missingPermissions.length > 1" class="col-span-6 flex items-end">
                                <div class="flex-grow" v-scope="Input({ input:{ id:'newPermission', type:'select', label: 'New Permission', allowableValues:() => missingPermissions }, model, api })"></div>
                                <div>
                                    <button type="button" @click="addPermission" :disabled="!model.newPermission"
                                            :class="`${model.newPermission ? 'text-gray-700 hover:bg-gray-50' : 'text-gray-400'} ml-2 inline-flex items-center px-3 py-2.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                                        Add
                                    </button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 flex justify-between">
                <div>
                    <input id="confirmDelete" type="checkbox" v-model="model.confirmDelete" 
                           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                    <label for="confirmDelete" class="mx-1 select-none">confirm</label>
                    <button type="button" :disabled="loading || !model.confirmDelete" @click="deleteUser"
                            :class="`${!loading && model.confirmDelete ? 'bg-red-600 hover:bg-red-700' : 'bg-red-400'} inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`">
                        Delete
                    </button>
                </div>
                <div>
                    <div v-if="loading" class="hidden sm:block" v-scope="Loading({ cls:'p-0' })"></div>
                </div>
                <div>
                    <button type="submit" :disabled="loading"
                            :class="`${!loading ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-indigo-400'} inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`">
                        Update User
                    </button>
                </div>
            </div>
        </form>
    </div>
</template>
<!--/minify-->
